<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <meta name="viewport" content="width=device-width,initical-scale=1.0"/>
    <link rel="stylesheet" href="./css/bootstrap.css"/>
    <link rel="stylesheet" href="./css/yhgl.css"/>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

</head>
<body>
<nav class="navbar head" role="navigation" id="nav">
    <div class="col-md-1"></div>
    <div class="col-md-10">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand logo" href="#">后台管理</a>
                <button class="navbar-toggle aa" data-toggle="collapse" data-target="#navbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="navbar">
                <ul class="nav navbar-nav">
                    <li><a href="index.jsp"><i class="glyphicon glyphicon-home"></i>后台管理</a></li>
                    <li class="active"><a href="用户管理.jsp"><i class="glyphicon glyphicon-user"></i>用户管理</a></li>
                    <li><a href="infomanager.jsp"><i class="glyphicon glyphicon-list-alt"></i>内容管理</a></li>
                    <li><a href="body.jsp"><i class="glyphicon glyphicon-list-alt"></i>前台首页</a></li>

                </ul>
                <ul class="navbar-nav nav navbar-right">
                    <li class="dropdown">
                        <a href="" class="dropdown-toggle" data-toggle="dropdown">
                            <%=request.getSession().getAttribute("username")%><span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href=""><i class="glyphicon glyphicon-cog"></i>个人主页</a></li>
                            <li><a href=""><i class="glyphicon glyphicon-screenshot"></i>个人设置</a></li>
                            <li><a href=""><i class="glyphicon glyphicon-credit-card"></i>账户中心</a></li>
                            <li><a href=""><i class="glyphicon glyphicon-heart"></i>我的收藏</a></li>
                        </ul>
                    </li>
                    <li><a href="Cancellation.jsp"><i class="glyphicon glyphicon-off"></i>退出</a></li>
                </ul>

            </div>
        </div>
    </div>
    <div class="col-md-1"></div>
</nav>

<div class="main clearfix">
    <div class="col-md-1"></div>
    <div class="col-md-2">
        <ul class="left nav">
            <li class="active"><a href="#">用户管理</a></li>
            <li class="nor" data-toggle='modal' data-target='#login'><a href="#">添加用户</a></li>
        </ul>
    </div>
    <div class="col-md-8">
        <h2 class='page-header'>用户管理</h2>
        <ul class='nav nav-tabs'>
            <li class="active"><a href="#lb" data-toggle='tab'>用户列表</a></li>
            <li data-toggle='modal' data-target='#login'><a href="#aq" data-toggle='tab'>添加用户</a></li>
        </ul>

        <!--模态框-->
        <div class='modal' id='login'>
            <div class='modal-dialog'>
                <div class='modal-content'>
                    <div class='modal-header'>
                        <button class='close' data-dismiss='modal'>&times;</button>
                        <h3 class='modal-title'>添加用户</h3>
                    </div>
                    <div class='modal-body'>
                        <form action="Check" method='get'>
                            <div class='form-group has-success'>
                                <label for='Name'>用户名</label>
                                <input type="text" placeholder="请输入用户名" id='Name' class='form-control has-success' name="username"/>
                            </div>
                            <div class='form-group has-warning'>
                                <label for='pwd'>用户密码</label>
                                <input type="password" placeholder="请输入用户密码" id='pwd' class='form-control ' name="passwd"/>
                            </div>
                            <div class='form-group '>
                                <label>请输入用户手机号</label>
                                <input type="text" placeholder="请输入用户手机号" id='emai' class='form-control ' name="phone"/>
                            </div>
                            <input type="submit" value="提交">
                            <input type="reset" value="重置">
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <%--        用户列表--%>
        <div class="tab-content">
            <div class="tab-pane active" id='lb'>
                <table class="table">
                    <thead>
                    <tr>
                        <th class="th">编号</th>
                        <th class="th">用户名</th>
                        <th class="th">电话</th>
                        <th class="th">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <c:forEach var="li" items="${users}">
                        <tr>
                            <td class="th">${li.id}</td>
                            <td>${li.username}</td>
                            <td>${li.phone}</td>
                            <td class="dropdown">
                                <button class='btn btn-default' data-toggle='dropdown'>
                                    操作<span class='caret'></span>
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a href="#">编辑</a></li>
                                    <li><a href="#">删除</a></li>
                                    <li><a href="#">修改内容</a></li>
                                </ul>
                            </td>
                        </tr>
                    </c:forEach>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="col-md-1"></div>
    </div>
</div>
</body>
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/bootstrap.js"></script>
</html>